<template>
  <!-- 模具任务详情表表单弹窗 -->
  <el-dialog
          v-model="visibleDialog"
          :title="props.title"
          width="70%"
          draggable
          @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="160">
      <el-row>
      <el-col :span="12">
      <el-form-item label="任务id" prop="taskId">
      <el-input v-if="!props.isReadonly" v-model="formData.taskId" placeholder="请输入任务id" clearable />
  
      <span v-else>{{formData.taskId}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="模具编号" prop="mouldCode">
      <el-input v-if="!props.isReadonly" v-model="formData.mouldCode" placeholder="请输入模具编号" clearable />
  
      <span v-else>{{formData.mouldCode}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="模具名称" prop="mouldName">
      <el-input v-if="!props.isReadonly" v-model="formData.mouldName" placeholder="请输入模具名称" clearable />
  
      <span v-else>{{formData.mouldName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="模具类型" prop="mouldType">
      <el-input v-if="!props.isReadonly" v-model="formData.mouldType" placeholder="请输入模具类型" clearable />
  
      <span v-else>{{formData.mouldType}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="模具位置id" prop="locationId">
      <el-input v-if="!props.isReadonly" v-model="formData.locationId" placeholder="请输入模具位置id" clearable />
  
      <span v-else>{{formData.locationId}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="模具位置名称" prop="locationName">
      <el-input v-if="!props.isReadonly" v-model="formData.locationName" placeholder="请输入模具位置名称" clearable />
  
      <span v-else>{{formData.locationName}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="出库状态" prop="outboundStatus">
    <el-select style="width: 100%;" v-if="!props.isReadonly" v-model="formData.outboundStatus" placeholder="请选择出库状态" clearable>
    <el-option
            v-for="item in dictionaryStore.filterDictList('outboundStatus')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
    />
  </el-select>
  
      <span v-else>{{ dictionaryStore.filterDictName('outboundStatus', formData.outboundStatus)}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="合格状态" prop="passStatus">
    <el-select style="width: 100%;" v-if="!props.isReadonly" v-model="formData.passStatus" placeholder="请选择合格状态" clearable>
    <el-option
            v-for="item in dictionaryStore.filterDictList('pass_status')"
            :key="item.value"
            :label="item.label"
            :value="item.value"
    />
  </el-select>
  
      <span v-else>{{ dictionaryStore.filterDictName('pass_status', formData.passStatus)}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="扫码时间" prop="scanTime">
      <el-input v-if="!props.isReadonly" v-model="formData.scanTime" placeholder="请输入扫码时间" clearable />
  
      <span v-else>{{formData.scanTime}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="出库时间" prop="outboundTime">
      <el-input v-if="!props.isReadonly" v-model="formData.outboundTime" placeholder="请输入出库时间" clearable />
  
      <span v-else>{{formData.outboundTime}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="创建时间" prop="createTime">
      <el-input v-if="!props.isReadonly" v-model="formData.createTime" placeholder="请输入创建时间" clearable />
  
      <span v-else>{{formData.createTime}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="创建人" prop="createdUserId">
      <el-input v-if="!props.isReadonly" v-model="formData.createdUserId" placeholder="请输入创建人" clearable />
  
      <span v-else>{{formData.createdUserId}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="创建人名" prop="createdUserName">
      <el-input v-if="!props.isReadonly" v-model="formData.createdUserName" placeholder="请输入创建人名" clearable />
  
      <span v-else>{{formData.createdUserName}}</span>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import request from "@/utils/request";
  import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
  const dictionaryStore = useDictStoreHook();

  defineOptions({
    name: "WMSEAMMOULDTASKINFODETAILADDORUPDATE",
    inheritAttrs: false,
  });

  const emit = defineEmits(["reset-table", "change-visible"]);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isReadonly: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  });

  const visibleDialog = ref(false);
  watch(
      () => props.visible,
      (newVal: boolean) => {
        visibleDialog.value = newVal;
        setTimeout(() => {
          formRef.value.clearValidate();
        }, 50);
      }
  );

  const rules = reactive({
    taskId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    mouldCode: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    mouldName: [
                        { min: 1, max: 200, message: "长度在 1 到 200 个字符", trigger: "blur" }
                  ],
    mouldType: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    locationId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    locationName: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    outboundStatus: [
                        ],
    passStatus: [
                        ],
    scanTime: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    outboundTime: [
                        ],
    createTime: [
                        ],
    createdUserId: [
                        { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" }
                  ],
    createdUserName: [
                        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
                  ],
  });

  const formRef = ref(ElForm);

  let formData = reactive({
 id: "",  version: "",  taskId: "",  mouldCode: "",  mouldName: "",  mouldType: "",  locationId: "",  locationName: "",  outboundStatus: "",  passStatus: "",  scanTime: "",  outboundTime: "",  remarks: "",  createTime: "",  createdUserId: "",  createdUserName: "",  lastUpdateTime: "",  lastUpdatedUserId: "",  lastUpdatedUserName: "",  enabled: "",  deleted: "",   });

  watch(
          () => props.data,
          (newVal: any) => {
            formData.id = ""
            if (newVal?.id) {
              const {  id,  version,  taskId,  mouldCode,  mouldName,  mouldType,  locationId,  locationName,  outboundStatus,  passStatus,  scanTime,  outboundTime,  remarks,  createTime,  createdUserId,  createdUserName,  lastUpdateTime,  lastUpdatedUserId,  lastUpdatedUserName,  enabled,  deleted,  } = newVal;
              Object.assign(formData, {  id,  version,  taskId,  mouldCode,  mouldName,  mouldType,  locationId,  locationName,  outboundStatus,  passStatus,  scanTime,  outboundTime,  remarks,  createTime,  createdUserId,  createdUserName,  lastUpdateTime,  lastUpdatedUserId,  lastUpdatedUserName,  enabled,  deleted,  });
            }
          }
  );

  /** 关闭表单弹窗 */
  function closeDialog() {
    visibleDialog.value = false;
    emit("change-visible", false);
    resetForm();
  }

  /** 重置表单 */
  function resetForm() {
    formRef.value.resetFields();
    formRef.value.clearValidate();
    formData.id = ""
    formData.version = ""
    formData.taskId = ""
    formData.mouldCode = ""
    formData.mouldName = ""
    formData.mouldType = ""
    formData.locationId = ""
    formData.locationName = ""
    formData.outboundStatus = ""
    formData.passStatus = ""
    formData.scanTime = ""
    formData.outboundTime = ""
    formData.remarks = ""
    formData.createTime = ""
    formData.createdUserId = ""
    formData.createdUserName = ""
    formData.lastUpdateTime = ""
    formData.lastUpdatedUserId = ""
    formData.lastUpdatedUserName = ""
    formData.enabled = ""
    formData.deleted = ""
  }

  const loading = ref(false);

  /** 模具任务详情表保存提交 */
  function handleSubmit() {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        loading.value = true;
        const text = formData.id ? "编辑" : "新增";
        await request({
          url: "/eam/eammouldtaskinfodetail/save",
          method: "post",
          data: formData,
        }).finally(() => {
          loading.value = false;
        });
        ElMessage.success( text +`成功`);
        closeDialog();
        emit("reset-table", formData.id);
      }
    });
  }


  // 组件销毁时调用
  onBeforeUnmount(() => {
    visibleDialog.value = false;
    emit("change-visible", false);
  });


</script>
